<template>
  <view>
    <van-tabbar :active="active" @change="tabChange">
      <!-- 代办 -->
      <van-tabbar-item to="./tab1.vue" >
        <span>代办</span>
        <img
          slot="icon"
          mode="aspectFit"
          :src="todoIcon.inactive"
          class="myIcon"
        />
        <img
          slot="icon-active"
          mode="aspectFit"
          :src="todoIcon.active"
          class="myIcon"
        />
      </van-tabbar-item>
      <!-- 添加 -->
      <van-tabbar-item>
        <img
          slot="icon"
          mode="aspectFit"
          :src="addIcon.inactive"
          class="myIcon"
        />
        <img
          slot="icon-active"
          mode="aspectFit"
          :src="addIcon.active"
          class="myIcon"
        />
        添加
      </van-tabbar-item>
      <!-- 日历表 -->
      <van-tabbar-item badge="5" size="40px">
        <img
          slot="icon"
          mode="aspectFit"
          :src="calIcon.inactive"
          class="myIcon"
        />
        <img
          slot="icon-active"
          mode="aspectFit"
          :src="calIcon.active"
          class="myIcon"
        />
        日程
      </van-tabbar-item>
    </van-tabbar>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      active: 0,
      todoIcon: {
        active: '/static/todo/todoActive.svg',
        inactive: '/static/todo/todoInactive.svg',
      },
      addIcon: {
        active: '/static/todo/addActive.svg',
        inactive: '/static/todo/addInactive.svg',
      },
      calIcon: {
        active: '/static/todo/calActive.svg',
        inactive: '/static/todo/calInactive.svg',
      },
      pathList: ['../todo/todo', '../addTodo/addTodo', '../calendar/calendar'],
    };
  },
  methods: {
    tabChange(e) {
      if (e.detail != 1) {
        this.active = e.detail;
      }
      // const path = this.pathList[e.detail]
      // console.log(path)
      // uni.navigateTo({
      //   url: path,
      // })
      this.$emit('tabSwitch', e.detail);
    },
  },
};
</script>
<style scoped>
.myIcon {
  width: 20px;
  height: 20px;
}
</style>
